<section class="sectionBg" [ngStyle]="tagData.style|styleFilter">

  <!--展示head-->
  <ng-container *ngIf="tagData.data[0]&&tagData.data[0].head">
    <div class="headBox">
      <div class="headLeftBox">
        <span class="headTitle" *ngIf="tagData.data[0].head"
          [ngStyle]="tagData.data[0].head.titleDoneCssStyle|styleFilter">
          {{tagData.data[0].head.titleLoading}}</span>
        <span class="description" *ngIf="tagData.data[0].head.des"
          [ngStyle]="tagData.data[0].head.desCssStyle|styleFilter">
          {{tagData.data[0].head.des}}</span>
      </div>
      <img src="assets/fw/hand.gif" class="hand" [ngStyle]="tagData.data[0].head.handCssStyle|styleFilter" />
    </div>
  </ng-container>




  <ng-container *ngFor="let item of tagData.data">

    <div class="top-box" [ngStyle]="item.house?.boxCssStyle|styleFilter">

      <div class="inner-head-mask" [ngStyle]="item.house?.innerHeadMaskCssStyle|styleFilter">

      </div>

      <img class="top-img" *ngIf="item.house?.imgUrl" [src]="item.house?.imgUrl"
        onerror="this.src='assets/img/375x250@2x.png'" [ngStyle]="item.house?.imgUrlCssStyle|styleFilter" />
      <div class="top-right-box ">
        <span class="title" *ngIf="item.house?.hous" [ngStyle]="item.house?.housCssStyle|styleFilter">
          {{item.house?.hous}}
          <ng-container *ngIf="item.house?.house_type">
            · {{item.house?.house_type}}
          </ng-container>
          <ng-container *ngIf="item.house?.area">
            · {{item.house?.area}}
          </ng-container>
        </span>
        <span class="comment" *ngIf="item.house?.secondRowRightLabel"
          [ngStyle]="item.house?.secondRowRightLabelCssStyle|styleFilter">{{item.house?.secondRowRightLabel}}</span>
      </div>
    </div>
    <!--水平滑动列表-->
    <div class="vertical-box">
      <div class="inner-vertical" [ngStyle]="item.house?.innerBoxCssStyle|styleFilter">
        <ng-container *ngFor="let v of item.caseList">
          <div class="vertical-item" [ngStyle]="v.verticalItemCssStyle|styleFilter">

            <!--如果有生成效果图属性则展示这个毛玻璃-->
            <div class="hidden-glass">
              <img [src]="v.img" class="v-img " onerror="this.src='assets/img/375x250@2x.png'"
                [ngStyle]="v.imgCssStyle|styleFilter" appDebounceClick (debounceClick)="openPage($event,v.imageLink)" />
            </div>

            <div class="mask-box">

            </div>

            <span class="design-type" *ngIf="v.designType"
              [ngStyle]="v.designTypeCssStyle|styleFilter">{{v.designType}}</span>
            <span class="status " *ngIf="v.status" [ngStyle]="v.statusCssStyle|styleFilter"
              appDebounceClick (debounceClick)="openPage($event,v.statusLink)">
              <font class="v-status">{{v.status}}</font>
              <ng-container *ngIf="v.showArrow; else showArrow">
                <img class="arrow v-arrow" src="assets/fw/zzzs_icon_arrow_right@3x.png"
                  [ngStyle]="v.arrowCssStyle|styleFilter" />
              </ng-container>
              <ng-template #showArrow>
                <img class="arrow v-arrow" src="assets/fw/zzzs_icon_arrow_right@3x.png" style="display: none;" />
              </ng-template>
            </span>
            <span class="decoration-list" *ngIf="v.leftLink" [ngStyle]="v.leftLink.cssStyle|styleFilter"
              appDebounceClick (debounceClick)="openPage($event,v.leftLink)">
              <img class="left-icon" src="assets/fw/personal center_icon_qingdan@3x.png" />
              {{v.leftLink.label}}
            </span>

            <span class="right-link" *ngIf="v.rightLink" [ngStyle]="v.rightLink.cssStyle|styleFilter"
              appDebounceClick (debounceClick)="openPage($event,v.rightLink)">
              {{v.rightLink.label}}
            </span>
            <!--有正在生成则需要添加这个正在加载中-->
            <div class="ai_wrap" *ngIf="item.head">
              <div class="ai_circle">
                <div class="percent ai_left"></div>
                <div class="percent ai_right wth0"></div>
              </div>
              <div class="ai_num"><span>0</span>%</div>
            </div>
          </div>

        </ng-container>
      </div>
    </div>
  </ng-container>

  <div class="noData" *ngIf="(tagData.data.length === 0)||( !tagData.data)">
    <span>暂无数据</span>
  </div>

  <p class="noLoadData" *ngIf="noLoadData">没有更多了~</p>

  <ng-container *ngIf="tagData.data[0]&&tagData.data[0].buttonOne; else elseTemplate">
    <p class="buttonOne" *ngIf="tagData.data[0].buttonOne" [ngStyle]="tagData.data[0].buttonOne.cssStyle|styleFilter"
      appDebounceClick (debounceClick)="openPage($event,tagData.data[0].buttonOne.buttonOne)">{{tagData.data[0].buttonOne?.label}}</p>
    <p class="buttonTwo" *ngIf="tagData.data[0].buttonTwo" [ngStyle]="tagData.data[0].buttonTwo.cssStyle|styleFilter"
      appDebounceClick (debounceClick)="openPage($event,tagData.data[0].buttonTwo.buttonTwo)">{{tagData.data[0].buttonTwo?.label}}
      <img class="arrowDown" src="assets/fw/release_icon_arrow_down@3x.png" />
    </p>
  </ng-container>
  <ng-template #elseTemplate>
    <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多数据...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ng-template>



</section>

<!-- <ion-footer class="footerArea">
  <div class="buttonBox">
    <div class="saveBtn" appDebounceClick (debounceClick)="saveChoice()">{{tagData?.data?.footDiv?.button?.text?.label}}</div>
  </div>
</ion-footer> -->